$border-radius: 4px;

$primary: #409eff;
$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;
$info: #909399;

$primary-hover: #66b1ff;
$success-hover: #85ce61;
$warning-hover: #ebb563;
$danger-hover: #f78989;
$info-hover: #a6a9ad;

$primary-active: #3a8ee6;
$success-active: #5daf34;
$warning-active: #cf9236;
$danger-active: #dd6161;
$info-active: #82848a;

$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;
$map: (
  'xs': (
    max-width: $--sm -1
  ),
  'sm': (
    min-width: $--sm
  ),
  'md': (
    min-width: $--md
  ),
  'lg': (
    min-width: $--lg
  ),
  'xl': (
    min-width: $--xl
  )
);

@mixin res($key) {
  @media only screen and #{inspect(map-get($map, $key))} {
    @content;
  }
}
